<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('工单审核')" />
    <th:block th:include="include :: datetimepicker-css" />
    <style>
        .add-form-box{
            width: 1000px;
            margin:0 auto;
        }
        .btn-footer{
            text-align: right;
            width: calc(100% - 74px);
        }
    </style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content add-form-box pt-md">
        <form class="form-horizontal" id="form-workOrder-edit" th:object="${workOrder}">
            <input name="workId" th:field="*{workId}" type="hidden">
            <input name="filePath" type="hidden" th:value="*{filePath}" id="filePath"/>
            <input name="fileName" type="hidden" th:value="*{fileName}" id="fileName"/>
            <div class="form-group">
                <label class="col-sm-3 control-label">工单名称：</label>
                <div class="col-sm-8">
                    <input name="name" readonly th:field="*{name}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">工单编号：</label>
                <div class="col-sm-8">
                    <input name="eventNumber" readonly th:field="*{eventNumber}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">设备类型：</label>
                <div class="col-sm-8">
                    <select name="deviceType" readonly class="form-control" th:with="type=${@dict.getType('gy_device_type')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{deviceType}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">工单描述：</label>
                <div class="col-sm-8">
                    <textarea name="description"  readonly class="form-control">[[*{description}]]</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">计划完成时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="planFinshTime"  readonly th:value="${#dates.format(workOrder.planFinshTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">实际开始时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="startTime"  class="form-control" readonly th:value="${#dates.format(workOrder.startTime, 'yyyy-MM-dd')}"  placeholder="yyyy-MM-dd" type="text" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">实际完成时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="endTime"  class="form-control"   readonly="readonly"  th:value="${#dates.format(workOrder.endTime, 'yyyy-MM-dd')}"   placeholder="yyyy-MM-dd" type="text" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">处理内容说明：</label>
                <div class="col-sm-8">

                    <div class="form-readonly"   readonly="readonly"  th:utext="*{processContent}"></div>
                </div>
            </div>
            <div class="form-group" id="fj">
                <label class="col-sm-3 control-label">处理附件：</label>
                <div class="col-sm-8">
                    <button type="button" id="fileDown" onclick="download()" class="btn btn-w-m btn-primary">下载附件</button>
                </div>
            </div>

        </form>

        <div class="btn-action-wrap">
            <button type="button" class="btn btn-sm btn-success"  onclick="pass()"><i class="fa fa-check-circle"></i> 审核通过</button>&nbsp;

            <button type="button" class="btn btn-sm btn-danger" onclick="notpass()"><i class="fa fa-times-circle"></i> 审核不通过 </button>&nbsp;

            <button type="button" class="btn btn-sm btn-secondary" onclick="closeItem()"><i class="fa fa-times"></i> 关 闭 </button>
        </div>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />


    <script th:inline="javascript">
        var prefix = ctx + "gy/workOrderAudit";
        $("#form-workOrder-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.saveTab(prefix + "/edit", $('#form-workOrder-edit').serialize());
            }
        }

        $("input[name='planFinshTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='startTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='endTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $(function(){
            if($("#filePath").val() =="" ){

                $("#fileDown").hide()
                $("#fj").hide();
            }else{hide
                $("#fileDown").show()
                $("#fj").show();
            }
        });


        function download(){

            var elelink = document.createElement("a");
            elelink.style.display = 'none';
            elelink.target = '_blank';
            elelink.href =  $("#filePath").val();
            elelink.download =  $("#fileName").val();
            document.body.appendChild(elelink);
            elelink.click();
            document.body.removeChild(elelink);

        }


        function pass(remark) {
            var workId = $("#workId").val();
            layer.open({
                title: '审核通过',
                area: ['500px', '240px'],
                btnAlign: 'c',
                closeBtn: '1',//右上角的关闭
                content: `<div><textarea name="txt_remark" id="remark" placeholder="请输入审核备注" maxlength="20" style="width:457px;height:95px;"></textarea></div>`,
                btn: ['确认'],
                yes: function (index, layero) {
                    var remark = $('#remark').val();//获取多行文本框的值
                    if (!remark) {
                        $.modal.alertWarning("请输入备注");
                        return;
                    }
                    layer.close(index);
                    $.operate.saveTab(prefix + "/pass?workId=" + workId + "&memo=" + remark, "");
                }
            });
        }

        function  notpass(id) {
            var workId = $("#workId").val();
            layer.open({
                title: '输入原因,并确认',
                area: ['500px', '240px'],
                btnAlign: 'c',
                closeBtn:'1',//右上角的关闭
                content: `<div><textarea name="txt_remark" id="remark" placeholder="请输入审核不通过原因" maxlength="20" style="width:457px;height:95px;"></textarea></div>`,
                btn:['确认'],
                yes: function (index, layero) {
                    var remark = $('#remark').val();//获取多行文本框的值
                    if (!remark) {
                        $.modal.alertWarning("请输入原因");
                        return;
                    }
                    layer.close(index);
                    $.operate.saveTab(prefix + "/notPass?workId=" + workId + "&memo=" + remark, "");
                }
            });
        }
    </script>
</body>
</html>
